<template>
  <div class="">
    <!-- ContactCard 联系人卡片 -->
    <van-contact-card
      type="add"
      @click="$router.push('/add')"
      add-text="添加学生"
    />

    <van-swipe-cell v-for="(item, index) in list" :key="index">
      <div class="item">
        <p>
          姓名：{{ item.name }}
          <span v-show="index == $store.state.flag">班长</span>
        </p>
        <p>班级：{{ item.grade }}</p>
        <p>宿舍号：{{ item.home }}</p>
        <p>性别：{{ item.sex }}</p>
      </div>

      <template #right>
        <van-button square type="danger" text="删除" @click="remove(index)" />
        <van-button
          square
          type="primary"
          text="编辑"
          @click="gotoEdit(index)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const list = computed(() => {
      return store.state.studentList;
    });
    //用计算属性从 vuex中拿到学生列表数据 注意 计算属性要引入 因为我们代码片段中没定义
    const data = reactive({});

    const remove = (index) => {
      store.commit("remove", index);
    };
    //删除 传到vuex中删除

    const gotoEdit = (index) => {
      router.push({ path: "/add", query: { index: index } });
    };
    return { ...toRefs(data), list, remove, gotoEdit };
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 90%;
  margin: 20px auto;
  border-radius: 5px;
  background: #fff;
  p {
    margin: 5px;
  }
}
</style>
